<template>
  <div class="person">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <el-form-item :label="hasHouse" prop="houseStatus" class="form-item ">
          <el-select v-model="ruleForm.houseStatus" placeholder="请选择"  @input="vailHouseInfo('ruleForm')">
            <el-option v-for="item in hasHouseDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="houseArea" prop="houseArea" class="form-item ">
          <el-select v-model="ruleForm.houseArea" placeholder="请选择" :disabled="isdisabled">
            <el-option v-for="item in houseAreaList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <span style="line-height:40px;padding-left:5px"> ㎡</span>
        </el-form-item>
        
        <el-form-item :label="housePrice" prop="houseAveragePrice" class="form-item ">
          <el-select v-model="ruleForm.houseAveragePrice" placeholder="请选择" :disabled="isdisabled">
            <el-option v-for="item in housePriceList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <span style="line-height:40px;padding-left:5px"> 元</span>
        </el-form-item>
    </el-form>
    <footer>
        <el-button @click="before()">上一步</el-button>
        <el-button @click="next('ruleForm')">下一步</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </footer>
  </div>
</template>

<script>
import eventVue from '../../assets/js/eventVue.js'
export default {
  name: 'PropertySituation',
  data() {
      return {
        isdisabled:false,
        selected:0,
        active:0,
        hasHouse:'是否有房屋',
        houseArea:'房屋面积',
        housePrice:'房屋均价',
        hasHouseDataList:[],
        houseAreaList:[],
        housePriceList:[],
        ruleForm: {
          houseStatus: '',
          houseArea: '',
          houseAveragePrice: '',
        },
        rules: {
          houseStatus: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
          houseArea: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
          houseAveragePrice: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
        },
        id:'',
        peieceId:''
      };
    },
    mounted(){
        this.$store.commit('title','房产情况')
        const instNo = sessionStorage.getItem('instNo')
        this.axios.get('/zyapply-api/parameter/bizSystem/'+instNo).then((res)=>{
          console.log(res.data)
           //是否有房屋
           var houseDataList = res.data.data.data[34];
           for(var i=0; i<houseDataList.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[34][i].ovValue;
              card_item.label= res.data.data.data[34][i].ovLabel;
              this.hasHouseDataList.push(card_item);
           }

           //房屋面积
           var houseAreaResult = res.data.data.data[46];
           for(var i=0; i<houseAreaResult.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[46][i].ovValue;
              card_item.label= res.data.data.data[46][i].ovLabel;
              this.houseAreaList.push(card_item);
           }

           //房屋均价
           var housePriceResult = res.data.data.data[47];
           for(var i=0; i<housePriceResult.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[47][i].ovValue;
              card_item.label= res.data.data.data[47][i].ovLabel;
              this.housePriceList.push(card_item);
           }
         }).then((result)=>{
        var params=this.$route.query;
      this.axios.get("/zyapply-api/detailPieces/"+params.pieceId).then((result)=>{
        if(result.data.status==200){
        var info =result.data.data;
        if(info!=null){
          if(info.id!=null&&info.id!=""){
            this.id=info.id;

          }
          if(info.applyDetail.houseAveragePrice!=null&&info.applyDetail.houseAveragePrice!=""){
            this.ruleForm.houseAveragePrice=info.applyDetail.houseAveragePrice;

          }
          if(info.applyDetail.houseArea!=null&&info.applyDetail.houseArea!=""){
            this.ruleForm.houseArea=info.applyDetail.houseArea;

          }

            //this.ruleForm.houseStatus=info.applyDetail.houseStatus;
        }
      }
    })
      })


    },
    methods: {
      /**当没有房屋时非必填 */

      vailHouseInfo(formName) {
        if(this.ruleForm.houseStatus=='0'){
            this.rules.houseArea[0].required = false;
            this.rules.houseAveragePrice[0].required = false;
            this.$refs[formName].validateField('houseArea',()=>{this.ruleForm.houseArea='';this.isdisabled = true})
            this.$refs[formName].validateField('houseAveragePrice',()=>{this.ruleForm.houseAveragePrice='';this.isdisabled = true})
        }else{
            this.rules.houseArea[0].required = true;
            this.rules.houseAveragePrice[0].required = true;
            this.isdisabled = false
        }

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.active=1;
        this.$emit('nextStep3',this.active);
        this.rules.houseArea[0].required = true;
        this.rules.houseAveragePrice[0].required = true;
      },
      next(formName) {
        var that = this;
        this.$refs[formName].validate(function(success,error){
          if(success){
            that.$store.commit('title','自有营运车辆情况')
            that.active=2;
            that.selected=2;
            eventVue.$emit("propertyData", that.ruleForm)
          }else{
            that.active=1;
            that.selected=1;
          }
          that.$emit('nextStep',that.active);
          that.$emit('nextStep2',that.selected);
        })

      },
      before(){
        this.$store.commit('title','车辆信息')
        this.active = 0;
        this.selected = 0;
        this.$emit('beforeStep',this.active);
        this.$emit('beforeStep2',this.selected);
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .demo-ruleForm {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    margin-bottom: 80px;
  }

  .form-item {
    min-width: 25%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .full {
    width: 100% !important;
  }

  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    min-height: 80px;
    background: #ddd;
    align-items: center;
    justify-content: center;
  }
</style>
